import React, { Component } from 'react'
import { Card, Row, Col, Modal } from 'antd'

export default class Gallery extends Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      activePicture: ''
    }
  }
  openImg = img => {
    this.setState({
      visible: true,
      activePicture: img
    })
  }
  hideImg = () => {
    this.setState({
      visible: false
    })
  }
  render() {
    const galleryList = [
      ['1.png', '2.png', '3.png', '4.png', '5.png'],
      ['6.png', '7.png', '8.png', '9.png', '10.png'],
      ['11.png', '12.png', '13.png', '14.png', '15.png'],
      ['16.png', '17.png', '18.png', '19.png', '20.png'],
      ['21.png', '22.png', '23.png', '24.png', '25.png']
    ]
    let list = galleryList.map(gallery =>
      gallery.map(item => (
        <Card
          hoverable
          onClick={() => {
            this.openImg(item)
          }}
          style={{ marginBottom: 10 }}
          cover={<img src={'/gallery/' + item} alt="" />}
        >
          <Card.Meta
            title="Europe Street beat"
            description="welcome to react"
          />
        </Card>
      ))
    )
    return (
      <div>
        <Row gutter={10}>
          <Col span={5}>{list[0]}</Col>
          <Col span={5}>{list[1]}</Col>
          <Col span={5}>{list[2]}</Col>
          <Col span={5}>{list[3]}</Col>
          <Col span={4}>{list[4]}</Col>
        </Row>
        <Modal
          width={600}
          height={500}
          visible={this.state.visible}
          title="图片画廊"
          onCancel={this.hideImg}
          footer={null}
        >
          <img
            style={{ width: '100%', height: '100%' }}
            src={'/gallery/' + this.state.activePicture}
            alt=""
          />
        </Modal>
      </div>
    )
  }
}
